<template>
  <div class="c">
    <div
      style="display: flex; justify-content: center"
      v-if="shoolObj.images || shoolObj.video"
    >
      <el-radio-group v-model="isCollapse" style="margin: 20px auto">
        <el-radio-button :value="false" v-if="shoolObj.images"
          >学校照片</el-radio-button
        >
        <el-radio-button :value="true" v-if="shoolObj.video"
          >学校视频</el-radio-button
        >
      </el-radio-group>
    </div>

    <el-carousel
      :interval="5000"
      arrow="always"
      height="200px"
      v-if="shoolObj.images"
      v-show="!isCollapse"
    >
      <el-carousel-item v-for="(item, index) in shoolObj.images" :key="index">
        <div>
          <el-image
            :z-index="99999999"
            :preview-teleported="true"
            style="width: 100%; height: 200px"
            :src="item"
            :preview-src-list="[item]"
          ></el-image>
        </div>
      </el-carousel-item>
    </el-carousel>
    <el-carousel
      :interval="5000"
      arrow="always"
      height="200px"
      :autoplay="false"
      v-show="isCollapse"
      v-if="shoolObj.video"
      @change="pausevideo"
    >
      <el-carousel-item v-for="(item, index) in shoolObj.video" :key="index">
        <video
          ref="videoref"
          :src="item"
          controls
          style="width: 100%; height: 200px"
        ></video>
      </el-carousel-item>
    </el-carousel>
    <div class="h5_school_details">
      <el-form :inline="true" :model="shoolObj" ref="rulesForm">
        <el-form-item label="核校状态：" prop="status" class="el-form-itemse">
          <el-text v-if="shoolObj.status == 1" class="mx-1" type="warning"
            >未核校</el-text
          >
           
          <el-text v-if="shoolObj.status == 2" class="mx-1" type="primary"
            >已核校</el-text
          >
          <el-text v-if="shoolObj.status == 3" class="mx-1" type="danger"
            >已驳回</el-text
          >
          <el-text v-if="shoolObj.status == 4" class="mx-1" type="success"
            >已通过</el-text
          >
          <el-text v-if="shoolObj.status == 5" class="mx-1" type="danger"
            >问题校</el-text
          >
        </el-form-item>
        <el-form-item label="排课状态：" prop="is_status" class="el-form-itemse">
          
          <el-text v-if="shoolObj.is_status == 1" class="mx-1" type="warning"
            >未排课</el-text
          >
          <el-text v-if="shoolObj.is_status == 2" class="mx-1" type="success"
            >已排课</el-text
          >
        </el-form-item>
        <el-form-item
          label="学校名称："
          prop="school_name"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.school_name }}</span>
        </el-form-item>
        <el-form-item label="所在省：" prop="province" class="el-form-itemse">
          <span class="el-input_shool">{{ shoolObj.province }}</span>
        </el-form-item>
        <el-form-item label="所在区县：" prop="county" class="el-form-itemse">
          <span class="el-input_shool">{{ shoolObj.county }}</span>
        </el-form-item>
        <el-form-item label="所在城市：" prop="city" class="el-form-itemse">
          <span class="el-input_shool">{{ shoolObj.city }}</span>
        </el-form-item>
        

        <el-form-item
          label="学校类别："
          prop="school_type"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.school_type }}</span>
        </el-form-item>
         
        <el-form-item
          label="学校人数："
          prop="school_num"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.school_num }}</span>
        </el-form-item>
        <el-form-item
          label="班级个数："
          prop="class_num"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.class_num }}</span>
        </el-form-item>
        <el-form-item
          label="教师个数："
          prop="teacher_num"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.teacher_num }}</span>
        </el-form-item>
        <el-form-item
          label="学校负责人姓名："
          prop="director_name"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.director_name }}</span>
        </el-form-item>
        <el-form-item label="职务：" prop="job" class="el-form-itemse">
          <span class="el-input_shool">{{ shoolObj.job }}</span>
        </el-form-item>
        <el-form-item
          label="学校负责人电话："
          prop="director_phone"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.director_phone }}</span>
        </el-form-item>

        <el-form-item
          label="在地工作人员名称："
          prop="user_name"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.user_name }}</span>
        </el-form-item>
        <el-form-item
          label="线上区域负责人名称："
          prop="zxuser_name"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.zxuser_name }}</span>
        </el-form-item>
        <el-form-item label="年级：" prop="grade" class="el-form-itemse">
          <span class="el-input_shool">{{ shoolObj.grade }}</span>
        </el-form-item>
        <el-form-item
          label="学校班级："
          prop="class_name"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.class_name }}</span>
        </el-form-item>
        <el-form-item label="班级课程：" prop="course" class="el-form-itemse">
          <span class="el-input_shool">{{ shoolObj.course }}</span>
        </el-form-item>
        <el-form-item label="第几节：" prop="some" class="el-form-itemse">
          <span class="el-input_shool">{{ shoolObj.some }}</span>
        </el-form-item>
        <el-form-item label="周几：" prop="week" class="el-form-itemse">
          <span class="el-input_shool">{{ shoolObj.week }}</span>
        </el-form-item>
        <el-form-item
          label="上课时间："
          prop="tart_time"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.tart_time }}</span>
        </el-form-item>
        <el-form-item label="下课时间：" prop="end_time" class="el-form-itemse">
          <span class="el-input_shool">{{ shoolObj.end_time }}</span>
        </el-form-item>
        <el-form-item
          label="实际上课时间："
          prop="num_time"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.num_time }}</span>
        </el-form-item>
        <el-form-item
          label="在地老师名称："
          prop="zuser_name"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.zuser_name }}</span>
        </el-form-item>
        <el-form-item
          label="联系电话："
          prop="user_phone"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.user_phone }}</span>
        </el-form-item>
        <el-form-item
          label="班级规模："
          prop="class_mode"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.class_mode }}</span>
        </el-form-item>
        <el-form-item
          label="入校照片："
          prop="images"
          class="el-form-itemse"
          v-if="!shoolObj.images"
        >
          <div>暂未上传</div>
        </el-form-item>
        <el-form-item
          v-if="!shoolObj.video"
          label="入校视频："
          prop="video"
          class="el-form-itemse"
        >
          <div>暂未上传</div>
        </el-form-item>
        <el-form-item
          label="入校信息："
          prop="description"
          class="el-form-itemse"
        >
          <div>{{ shoolObj.description || "暂无入校信息" }}</div>
        </el-form-item>

        
        <el-form-item
        v-if="shoolObj.status == 5"
          label="问题校备注："
          prop="wenti_remark"
          class="el-form-itemse"
        >
          <div>{{ shoolObj.wenti_remark }}</div>
        </el-form-item>
      </el-form>
    </div>
    <!-- <div style="height: 10vh"></div> -->
    <div style="height: 10vh" v-if="authority([2, 3, 4])"></div>

    <BottomAdd v-if="authority([2])">
      <!-- 在地区域负责人 -->
      <div class="boxs_bov_buttons">
        <el-button
          type="primary"
          plain
          @click="openOkAll(1)"
          style="width: 100%; height: 40px"
          v-if="shoolObj.status == 2"
          >可线上排课</el-button
        >
        <el-button
          v-if="shoolObj.status == 2"
          type="danger"
          style="width: 100%; height: 40px"
          @click="openOkAll(2)"
          plain
          >核校驳回</el-button
        >
        <el-button
          v-if="shoolObj.status == 3"
          type="primary"
          style="width: 100%; height: 40px"
          @click="openOkAllcx"
          plain
          >重新核校</el-button
        >
        <el-button type="warning" style="width: 100%; height: 40px" plain @click="Problem"
        v-if="shoolObj.status == 1|| shoolObj.status == 2"
        >问题校</el-button>
        <el-button
          @click="hxok()"
          type="primary"
          v-if="shoolObj.status != 2 && shoolObj.status != 3&&shoolObj.status != 5"
          style="width: 100%; height: 40px"
          >编辑</el-button
        >
        <el-button
          style="width: 100%; height: 40px"
          type="danger"
          @click="handleDelete" 
          >删除</el-button 
        >
      </div>
    </BottomAdd> 

    <BottomAdd v-if="authority([4])&&shoolObj.status != 3">
      <!-- 在地底部 -->
      <div class="boxs_bov_buttons" v-if="shoolObj.status != 3">
        <el-button
          v-if="shoolObj.status == 1"
          @click="hxok()"
          type="primary"
          style="width: 100%; height: 40px"
          >核校确认</el-button
        >
        <el-button
          @click="addModuleLogShool()"
          style="width: 100%; height: 40px"
          >添加入校资料</el-button
        >
      </div>
    </BottomAdd>
    <BottomAdd v-if="authority([4])&&shoolObj.status == 3">
      <!-- 在地底部 -->
      <div class="boxs_bov_buttons" v-if="shoolObj.status == 3">
         
        <el-button
          @click="openOkAllons(shoolObj.id)"
          style="width: 100%; height: 40px"
          >重新核校</el-button
        >
      </div>
    </BottomAdd>
    <BottomAdd v-if="authority([3])&&shoolObj.is_status==1&&shoolObj.status==4">
      <!-- 在地底部 -->
      <div class="boxs_bov_buttons" v-if="shoolObj.status != 3">
        <el-button 
          @click="paikeok()"
          type="primary"
          style="width: 100%; height: 40px"
          >排课确认</el-button
        > 
      </div>
    </BottomAdd>
    <!-- 组件 -->
    <addModuleShool
      v-if="authority([2, 4])"
      ref="addModuleShool"
      @refreshData="refreshData"
    />

    <!-- 入校资料弹窗 -->
    <DiaoLogShool ref="diaologshool" @getData="ShoolDatails" />
  </div>
</template>

<script>
import { schoolEdit, schoolDel, statuss,scheduling ,schoolUpdate} from "@/api/api";
import { ElMessage, ElMessageBox } from "element-plus";

import { setStorage, getStorage } from "@/utils/util";
import BottomAdd from "@/components/bottom_add.vue";
import addModuleShool from "./components/addShool.vue"; //在地和在地区域的新增
import DiaoLogShool from "./components/diaologShool.vue";
export default {
  components: {
    BottomAdd,
    addModuleShool,
    DiaoLogShool,
  },
  data() {
    return {
      id: this.$route.query.id,
      shoolObj: {},
      isCollapse: false,
      userInfo: "", //用户权限id
    };
  },
  watch: {
    isCollapse(val) {
      this.pausevideo();
    },
  },
  mounted(o) {
    // //console.log(o,'----------o')
    this.ShoolDatails();
  },
  created(o) {
    this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限
    // this.ShoolDatails();
  },
  methods: {
    openOkAllons(e){
      let vm = this;
      vm.$confirm("是否确认选中的数据进行重新核校?", "重新核校", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        return statuss({ ids: e, status: 1 }).then((res) => {
          if (res.code == 1) {
            vm.$message.success(res.msg);
            vm.ShoolDatails();
            // vm.getData();
          } else {
            vm.$message.warning(res.msg);
          }
        });
      });
    },
    Problem(row) {
      // 问题校
      let vm=this
      ElMessageBox.prompt("请输入问题校原因", "问题校", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /.+/,
        inputErrorMessage: "请输入问题校原因",
      })
        .then(({ value }) => {
          return schoolUpdate({ wenti_remark: value,id:vm.shoolObj.id,status:5 }).then((res) => {
            vm.$message.success(res.msg);
            vm.ShoolDatails();
          })
        }) 
    },
    // 排课确认
    paikeok(){
      let vm=this
       // 确认排课
       this.$confirm("确定进行排课确认吗？", "排课确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let objs = {
          id: vm.shoolObj.id,
        };
        scheduling(objs).then((res) => {
          vm.ShoolDatails();
        });
      });
    },
    openOkAllcx(){
      // 重新核校
      let vm = this;
      vm.$confirm(
        `是否确认对该校进行重新核校?`,
        `重新核校确认`,
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(function () {
        return statuss({
          id: vm.shoolObj.id,
          status:1
        }).then((res) => {
          if (res.code == 1) {
            vm.$message.success(res.msg);
            vm.ShoolDatails();
            // vm.getData();
          } else {
            vm.$message.warning(res.msg);
          }
        });
      });
    },
    // 在地区域核校操作
    openOkAll(e) {
      let vm = this;
      vm.$confirm(
        `是否确认对该校进行核校${e == 1 ? "通过" : "驳回"}?`,
        `${e == 1 ? "通过" : "驳回"}确认`,
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(function () {
        return statuss({
          id: vm.shoolObj.id,
          status:
            e == 1
              ? Number(vm.shoolObj.status) + 2
              : Number(vm.shoolObj.status) + 1,
        }).then((res) => {
          if (res.code == 1) {
            vm.$message.success(res.msg);
            vm.ShoolDatails();
            // vm.getData();
          } else {
            vm.$message.warning(res.msg);
          }
        });
      });
    },
    // 学校弹窗显示
    addModuleLogShool() {
      this.$refs.diaologshool.addPlan(this.shoolObj);
    },
    // 学校删除
    handleDelete() {
      let vm = this;
      vm.$confirm("是否确认删除当前数据?", "删除警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        return schoolDel({ id: vm.shoolObj.id }).then((res) => {
          if (res.code == 1) {
            vm.$message.success(res.msg);
            vm.$router.go(-1);
          } else {
            vm.$message.warning(res.msg);
          }
        });
      });
    },
    refreshData(x) {
      this.ShoolDatails();
    },
    // 在校核校确认
    hxok() {
      if (this.authority([4])) {
        this.$refs.addModuleShool.addModuleFn(
          this.shoolObj,
          "核校确认提交",
          []
        );
      } else if (this.authority([2])) {
        this.$refs.addModuleShool.addModuleFn(this.shoolObj, "编辑", []);
      }
    },
    authority(groupArr = [0]) {
      // 权限筛选
      let userInfo = this.userInfo;
      // 当前权限和传来的权限组进行对比
      if (groupArr.some((item) => Number(item) === userInfo)) return true;
      return false;
    },
    pausevideo() {
      // 暂停所有视频
      if(!this.$refs.videoref) return
      this.$refs.videoref.forEach((video) => {
        if (video) video.pause();
      });
    },
    // 获取基础学校数据
    ShoolDatails() {
      let vm=this
      schoolEdit({ id: this.id }).then((res) => {
        console.log(res.data, "---获取到的学校数据");
        this.shoolObj = res.data;
        //console.log(res.data.video)

        // isCollapse
        if (res.data.images){ 
          return vm.isCollapse=false
        } 
        if (res.data.video){
          return vm.isCollapse=true
        }  
      });
    },
  },
};
</script>

<style>
.el-form-itemse {
  min-width: 40%;
}
.h5_school_details {
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
}
</style>